<!-- 潜力股票 -->
<template>
  <div class="potential-share">
    <div class="scroll-container" @touchstart.stop @touchmove.stop>
      <div class="list-container">
        <div class="group" v-for="(group, index) in groupedData" :key="index">
          <div class="share-item" v-for="item in group" :key="item.id">
            <div class="item-content rounded-lg p-20" :class="item.color">
              <div class="left">
                <img class="logo" :src="item.logo" alt="logo"/>
                <div class="info">
                  <p class="name font-26">{{ item.name }}</p>
                  <p class="code font-22">{{ item.code }}</p>
                </div>
              </div>
              <div class="right">
                <p class="change font-26">{{ item.change >= 0 ? '+' : '' }}{{ item.change }}%</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'PotentialShare',
  props: {
    shareData: {
      type: Array,
      default: () => []
    }
  },
  computed: {
    groupedData() {
      // 每组2个数据(上下两行)
      const result = [];
      for (let i = 0; i < this.shareData.length; i += 2) {
        result.push(this.shareData.slice(i, i + 2));
      }
      return result;
    }
  }
}
</script>

<style lang="scss" scoped>
.potential-share {
  padding: 1rem 0;

  .scroll-container {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    position: relative;
    z-index: 1;

    &::-webkit-scrollbar {
      display: none;
    }
  }

  .list-container {
    display: flex;
    gap: 1rem;
    padding: 0.5rem 0;
    width: fit-content;
    touch-action: pan-x;
  }

  .group {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .share-item {
    .item-content {
      width: 33rem;
      height: 5rem;
      display: flex;
      align-items: center;
      justify-content: space-between;

      &.green {
        background: linear-gradient(90deg, #73C68E 0%, #102419 50%, #000000 100%);
        border: 1px solid #144E31;
      }

      &.red {
        background: linear-gradient(90deg, #DB8885 0%, #EDF6F1 100%);
        border: 1px solid #4E1414;
      }

      &.black {
        background: linear-gradient(90deg, #000000 0%, #5f5f5f 100%);
        border: 1px solid #1C1C1E;
      }
    }

    .left {
      display: flex;
      align-items: center;
      gap: 1rem;

      .logo {
        width: 3.75rem;
        height: 3.75rem;
        object-fit: contain;
      }

      .info {
        .name {
          color: #FFFFFF;
          margin-bottom: 0.25rem;
        }

        .code {
          color: #999999;
        }
      }
    }

    .right {
      .change {
        font-weight: 500;
      }

      .item-content.green & {
        color: #2abc5a;
      }

      .item-content.red & {
        color: #c7697f;

      }

      .item-content.black & {
        color: #FFFFFF;
      }
    }
  }
}
</style>
